<template>
  <div class="node-editor-help">
    <div class="help-content">
      <div class="help-title">操作指南</div>
      <ul class="help-list">
        <li><span class="key-combo">空格 + 鼠标左键</span>：移动画布</li>
        <li><span class="key-combo">鼠标滚轮</span>：缩放画布</li>
        <li><span class="key-combo">Delete</span>：删除选中的节点或连接线</li>
        <li><span class="key-combo">输出端口 + 拖拽</span>：创建连接线</li>
        <li><span class="key-combo">鼠标右键</span>：打开菜单，新建节点</li>
      </ul>
    </div>
  </div>
</template>

<script setup>
// 由于这是一个纯展示组件，不需要任何逻辑处理
</script>

<style scoped>
.node-editor-help {
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: 50;
  pointer-events: none; /* 允许点击穿透 */
}

.help-content {
  background-color: rgba(45, 55, 72, 0.8);
  border-radius: 6px;
  padding: 12px 16px;
  color: white;
  font-size: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  max-width: 300px;
}

.help-title {
  font-weight: bold;
  margin-bottom: 8px;
  font-size: 14px;
  color: #63b3ed;
}

.help-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.help-list li {
  margin-bottom: 6px;
  display: flex;
  align-items: flex-start;
}

.key-combo {
  background-color: rgba(74, 85, 104, 0.7);
  padding: 2px 6px;
  border-radius: 4px;
  margin-right: 8px;
  font-weight: 500;
  display: inline-block;
  min-width: 80px;
}
</style>